<?php
view_header('积分商品管理');
global $vue;
$url = '/point/product/list';

// 初始化Vue数据
$vue->data("height", "");
$vue->data("dialogVisible", false);
$vue->data("selectedTypeId", ""); // 添加选中的分类ID
$vue->data("form", [
    'id' => '',
    'name' => '',
    'type_id' => '',
    'brand_id' => '',
    'sku' => '',
    'price' => 0,
    'market_price' => 0,
    'cost_price' => 0,
    'stock' => 0,
    'images' => [],
    'description' => '',
    'specifications' => [],
    'attributes' => [],
    'sort' => 0,
    'status' => 1
]);
$vue->data("formTitle", lang('添加商品'));
$vue->data("tree_data", []);
$vue->data("brand_data", []);

$vue->created(["load()"]);

$vue->method("load()", "
this.height = 'calc(100vh - " . get_config('admin_table_height') . "px)';
");

$vue->method("showAdd()", " 
this.form = {
    id: '', 
    type_id: '',
    brand_id: '',
    sku: '',
    price: 0,
    market_price: 0,
    cost_price: 0,
    stock: 0,  
    status: 'success',
    //默认单规格
    spec_type:'1',
    product_type:'point_1',

};
this.formTitle = '" . lang('添加商品') . "';
this.dialogVisible = true;   
");

$vue->method("update_row(row)", " 
ajax('/point/product/detail', {id: row.id}, function(res) { 
    if (res.code == 0) {  
        app.\$set(app, 'form', res.data);   
        app.formTitle = '" . lang('编辑商品') . "';
        app.dialogVisible = true;    
    }  
});
");

$vue->method("submit()", "
let url = this.form.id ? '/point/product/edit' : '/point/product/add'; 
ajax(url, this.form, function(res) {
    " . vue_message() . "
    if (res.code == 0) { 
        app.dialogVisible = false;
        app.load_list();
    } 
});
");

$vue->method("delete_row(row)", "
this.\$confirm('" . lang('确认删除该商品吗？') . "', '" . lang('提示') . "', {
    confirmButtonText: '" . lang('确定') . "',
    cancelButtonText: '" . lang('取消') . "',
    type: 'warning'
}).then(() => {
    " . vue_message() . "
    ajax('/point/product/delete', {id: row.id}, function(res) {
        if (res.code == 0) { 
            this.load_list();
        } 
    });
}).catch(() => {});
");

// 权限控制
$vue->data("can_add", has_access('point/product/add'));
$vue->data("can_edit", has_access('point/product/edit'));
$vue->data("can_del", has_access('point/product/delete'));
?>

<!-- 左右布局容器 -->
<div class="d-flex" style="height:calc(100vh - 40px);">
    <!-- 右侧内容区域 -->
    <div class="flex-fill ms-3 overflow-auto">
        <?php
        echo element("filter", [
            'data' => 'list',
            'url' => $url,
            'is_page' => true,
            'init' => true,
            [
                'type' => 'input',
                'name' => 'title',
                'attr_element' => ['placeholder' => lang('商品名称')],
            ],
            [
                'type' => 'hidden',
                'name' => 'type_id',
                'v-model' => 'selectedTypeId',
            ],
            [
                'type' => 'html',
                'html' => '<el-button type="primary" v-if="can_add" @click="showAdd()">' . lang('添加商品') . '</el-button>',
            ],
        ]);
        ?>

        <?php
        echo element('table', [
            ['name' => 'open', ':data' => 'list', ":height" => "height"],
            [
                'name' => 'column',
                'prop' => 'image',
                'label' => lang('图片'),
                'width' => '80',
                'tpl' => [[
                    'type' => 'html',
                    "html" => "<el-image style='width: 50px; height: 50px;' v-if='scope.row.image' :src='scope.row.image' :preview-src-list='[scope.row.image]'></el-image>"
                ]]
            ],
            ['name' => 'column', 'prop' => 'title', 'label' => lang('商品名称')],
            [
                'name' => 'column',
                'prop' => 'product_type_title',
                'label' => lang('商品类型'),
                'tpl' => [[
                    'type' => 'html',
                        "html" => "
                        <el-tag :type='scope.row.product_type_color'>{{scope.row.product_type_title}}</el-tag>
                    "
                ]]

            ],
            ['name' => 'column', 'prop' => 'point', 'label' => lang('积分'), 'width' => '200'],
            ['name' => 'column', 'prop' => 'stock', 'label' => lang('库存'), 'width' => '160'],
            [
                'name' => 'column',
                'prop' => 'status',
                'label' => lang('状态'),
                'width' => '100',
                'tpl' => [[
                    'type' => 'html',
                    "html" => "
                            <el-tag v-if='scope.row.status == \"success\"' type='success'>" . lang('上架') . "</el-tag>
                            <el-tag v-else type='danger'>" . lang('下架') . "</el-tag>
                        "
                ]]
            ],
            [
                'name' => 'column',
                'label' => lang('操作'),
                'width' => '200',
                'tpl' => [
                    ['name' => 'button', 'label' => lang('编辑'), "v-if" => "can_edit", '@click' => 'update_row(scope.row)', 'type' => 'primary', 'size' => 'small'],
                    ['name' => 'button', 'label' => lang('删除'), "v-if" => "can_del", '@click' => 'delete_row(scope.row)', 'type' => 'danger', 'size' => 'small', 'style' => 'margin-left: 10px;'],
                ]
            ],
            ['name' => 'close'],
        ]);
        ?>

        <?php
        echo element("pager", [
            'data' => 'list',
            'per_page' => get_config('per_page'),
            'url' => $url,
            'reload_data' => []
        ]);
        ?>
    </div>
</div>

<?php
$vue->opt['is_editor'] = true;
?>

<!-- 商品表单对话框 -->
<el-dialog :title="formTitle" :visible.sync="dialogVisible" width="500px" top="10px" :close-on-click-modal="false">
    <div class="container-fluid ">
        <div class="row ">
            <!-- 左侧表单区域 -->
            <div class="col-12 pe-4 overflow-auto">
                <?php
                element\form::$model = 'form';
                echo element('form', [
                    ['type' => 'open', 'model' => 'form', 'label-position' => 'left', 'label-width' => '100px'],

                    [
                        'type' => 'input',
                        'name' => 'title',
                        'label' => lang('商品名称'),
                        'attr' => ['required'],
                        'attr_element' => ['placeholder' => lang('请输入商品名称'),'style' => 'width: 300px;',],
                    ],
                    [
                        'type' => 'upload_media',
                        'name' => 'image',
                        'attr' => ['required'],
                        'label' => lang('商品主图'),
                        'url' => '/admin/upload',
                        'max' => 1,
                    ],
                    [
                        'type' => 'upload_media',
                        'name' => 'images',
                        'label' => lang('商品图片'),
                        'url' => '/admin/upload',
                        'multiple' => true,
                        'max' => 5,
                    ],
                    [
                        'type' => 'number',
                        'name' => 'point',
                        'label' => lang('积分'),
                        'attr' => ['required'],
                        'attr_element' => [
                            'style' => 'width: 160px;',

                        ],

                    ],
                    [
                        'type' => 'number',
                        'name' => 'stock',
                        'label' => lang('库存'),
                        'attr' => ['required'],
                        'attr_element' => [
                            'style' => 'width: 160px;',

                        ],
                    ],
                    [
                        'type' => 'radio',
                        'name' => 'product_type',
                        'label' => '商品类型',
                        'value' => [['label' => lang('实物商品'), 'value' => 'point_1'], ['label' => lang('虚拟商品'), 'value' => 'point_2']],
                    ],
                    [
                        'type' => 'radio',
                        'name' => 'status',
                        'label' => '商品状态',
                        'value' => [['label' => lang('上架'), 'value' => 'success'], ['label' => lang('下架'), 'value' => 'error']],
                    ],
                    ['type' => 'close']
                ]);
                ?>
            </div>

        </div>



    </div>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"><?php echo lang('取消'); ?></el-button>
        <el-button type="primary" @click="submit()"><?php echo lang('确定'); ?></el-button>
    </div>

</el-dialog>

<?php view_footer(); ?>